import { createBrowserRouter, Navigate } from 'react-router-dom'
import React, { lazy } from 'react'

const Home = lazy(() => import('../pages/home/home.jsx'))
const HomeGame = lazy(() => import('../pages/home/components/game.jsx'))
const HomeMusic = lazy(() => import('../pages/home/components/music.jsx'))
const Login = lazy(() => import('../pages/login/login.jsx'))
const LargeSizeScreen = lazy(() => import('../pages/largeSizeScreen/index.jsx'))
const NotFound = lazy(() => import('../pages/NotFound/index.jsx'))

const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigate to="/largeSizeScreen" />
  },
  {
    path: '/home',
    element: (
      <React.Suspense>
        <Home></Home>
      </React.Suspense>
    ),
    children: [
      {
        path: '/home/game',
        element: (
          <React.Suspense>
            <HomeGame></HomeGame>
          </React.Suspense>
        )
      },
      {
        path: '/home/music',
        element: (
          <React.Suspense>
            <HomeMusic></HomeMusic>
          </React.Suspense>
        )
      }
    ]
  },
  {
    path: '/login',
    element: (
      <React.Suspense>
        <Login></Login>
      </React.Suspense>
    )
  },
  {
    path: '/largeSizeScreen',
    element: (
      <React.Suspense>
        <LargeSizeScreen></LargeSizeScreen>
      </React.Suspense>
    )
  },
  {
    path: '*',
    element: (
      <React.Suspense>
        <NotFound></NotFound>
      </React.Suspense>
    )
  }
])

export default router
